<template>
    <div class="shopinfo">

        <!-- 购物车小球  -->
         <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
            @after-leave="afterLeave"
        >
        <div class="ball" v-show="ballflag" ref="ball"></div>
         </transition>
            <!-- 轮播图区域 --> 
            <!-- isfull决定轮播图的宽度是百分之百还是自适应 -->
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
			        <Swiper :lunbotuList="lunbotuList" :isfull="false"></Swiper>
                    </div>
                </div>
            </div>
        <!-- 商品购买区域 -->
            <div class="mui-card">
                <div class="mui-card-header">{{shopInfo.title}}</div>  
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <p class="price">
                          市场价:<del>￥{{shopInfo.market_price}}</del>&nbsp;&nbsp;销售价:<span class="now_price">￥{{shopInfo.sell_price}} </span> 
                        </p>
                        <p>
                            购买数量:
                         <numbox @func="getselectedCount" :max="shopInfo.stock_quantity"></numbox>
                        </p>

                        <p>
                            <mt-button type="primary" size="small">立即购买</mt-button>
                            <mt-button type="danger" size="small" @click="clickFlag && addToShopCar()" >加入购物车</mt-button>
                        </p>
                    </div>
                </div>
         
            </div>
            <!-- 商品描述区域 -->
            <div class="mui-card">
                <div class="mui-card-header">商品参数</div>
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <p>商品货号:{{shopInfo.goods_no}}</p>
                        <p>库存情况:{{shopInfo.stock_quantity}}</p>
                        <p>上架时间:{{shopInfo.add_time | dateFormat}}</p>
                    </div>
                </div>
                <div class="mui-card-footer">
                    <mt-button type="primary" size="large" @click="goData(id)" plain>图文介绍</mt-button>
                    <mt-button type="danger" size="large" @click="goComment(id)" plain>商品评论</mt-button>
                </div>
            </div>
    
    </div>
</template>

<script>
//导入轮播图组件
import Swiper from '../subcomponents/swiper.vue'
// 导入数字加减框的组件
import Numbox from '../subcomponents/shopinfo_numbox.vue'
export default {
    data() {
        return {
            id:this.$route.params.id,
            lunbotuList:[],
            shopInfo:{},
            ballflag: false,
            clickFlag:true,//和afterLeave是来处理小球快速点击出现的bug
            selectedCount:1
        };
    },
    created(){
        this.getlunbotuList()
        this.getShopinfo();
    },
    
    methods: {
        getlunbotuList(){
            this.$http.get('api/getthumimages/'+this.id).then(result=>{
                if(result.body.status ===0){
                     result.body.message.forEach(item=>{
                         item.img = item.src
                     });
                     this.lunbotuList =result.body.message
                }
            })
        },
        getShopinfo(){
          this.$http.get('api/goods/getinfo/'+this.id).then(result=>{
                if(result.body.status ===0){
                     this.shopInfo =result.body.message[0]
                     
                }
            })
        },
        goData(id){
            //两种书写方式
            this.$router.push('/home/commodity/photodata/'+id)
        },
        goComment(id){
            this.$router.push({name:'comment',params:{id}})
        },

        //控制小球动画
         addToShopCar() {
            // 添加到购物车
            this.ballflag = !this.ballflag;
            // { id:商品的id, count: 要购买的数量, price: 商品的单价，selected: false  }
            // 拼接出一个，要保存到 store 中 car 数组里的 商品信息对象
            var goodsinfo = {
                id: this.id,
                count: this.selectedCount,
                price: this.shopInfo.sell_price,
                selected: true
            };
            // 调用 store 中的 mutations 来将商品加入购物车
            this.$store.commit("addTocar", goodsinfo);
            },
        //domObject.getBoundingClientRect()获取元素位置
            beforeEnter(el){
                    el.style.transform='translate(0,0)'
                },
                enter(el,done){
                    this.clickFlag = false
                    //获取小球的位置
                    const ballPosition = this.$refs.ball.getBoundingClientRect();
                    //获取购物车小球的位置使用dom元素获取可以获取任何父组件的位置
                    const badgePosition = document.getElementById('badge').getBoundingClientRect();
                    //当像素改变，小球任然能到达指定位置
                    const xDist = badgePosition.left-ballPosition.left;
                    const yDist = badgePosition.top - ballPosition.top;


                    el.offsetWidth
                    //使用es6写法写入变量
                    el.style.transform=`translate(${xDist}px,${yDist}px)`
                    el.style.transition='all 1s cubic-bezier(.4,-0.3,.1,.68)'
                    done()
                },
                afterEnter(el){
                    this.ballflag=!this.ballflag
                },
                afterLeave(el){
                    this.clickFlag =true
                },

            getselectedCount(count){
                this.selectedCount = count;
                console.log(this.selectedCount)
            },
       
    
    
    },
    components:{
        Swiper,
        Numbox
    }
}
</script>

<style scoped lang="scss">
.shopinfo{
    .ball{
          width: 15px;
          height: 15px;
          background: red;
          border-radius: 50%;
          z-index: 99;
          position: absolute;
          left: 146px;
          top: 390px;
      }
    background-color: #ccc;
    overflow: hidden;
    .now_price{
        color: red;
        font-weight: bold;
        font-size: 16px;
    }
    .mui-card-footer{
        display: block;
        button{
            margin-top: 15px;
        }
    }

}
</style>
